<template>
    <el-dialog :visible.sync="openShow" title="送货单预览" width="calc(210mm + 40px)" v-if="openShow">
        <div ref="printTarget" id="printTarget">
            <orderItemComponent saveCompany="第一联 用户单位保存" :rwoData="rowData" />

            <div class="line-box"></div>

            <orderItemComponent saveCompany="第二联 送货单位保存" :rwoData="rowData" />
        </div>

        <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
            <el-button type="success" size="small" v-if="!isPrintShow" :loading="btnLoading" @click="savaOrder">保
                存</el-button>
            <el-button type="primary" v-print="printObject" size="small" v-if="!isPrintShow" :loading="btnLoading">打 印 并
                保 存</el-button>
            <el-button type="primary" size="small" v-if="isPrintShow" v-print="printObject" :loading="btnLoading">打
                印</el-button>
        </span>
    </el-dialog>
</template>

<script>
import print from 'vue-print-nb'
import orderItemComponent from './orderItem.vue';
import { printNewSendOrderApi } from "@/api/system/order";

// A4 纸固定: 210mm * 297mm
// dip ：dots per inch，每英寸点数，常见的打印分辨率有 300dpi、600dpi 等。
// px = 纸张尺寸(mm) / 25.4 * dip


export default {
    name: "orderProcessing",
    data() {
        return {
            btnLoading: false,
            rowData: {},
            openShow: false,
            isPrintShow: false,
            printObject: {
                id: 'printTarget',
                popTitle: '', // 打印配置页上方的标题
                // extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
                preview: false, // 是否启动预览模式，默认是false
                previewTitle: '预览的标题', // 打印预览的标题
                previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
                standard: "测试",
                zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
                previewBeforeOpenCallback() {
                    console.log('正在加载预览窗口！');
                    // console.log(that.msg, this)
                }, // 预览窗口打开之前的callback
                previewOpenCallback() {
                    console.log('已经加载完预览窗口，预览打开了！')
                }, // 预览窗口打开时的callback
                beforeOpenCallback() {
                    console.log('开始打印之前！')
                }, // 开始打印之前的callback
                openCallback() {
                    console.log('执行打印了！')
                }, // 调用打印时的callback
                closeCallback(res) {
                    if (res.isPrintShow) return;

                    res.$confirm("是否继续执行保存操作", "打印提示", {
                        confirmButtonText: "确认",
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(confir => {
                        res.savaOrder();
                    }).catch(() => {
                        console.log("取消保存")
                    })
                }, // 关闭打印的callback(无法区分确认or取消)
                clickMounted() {
                    console.log('点击v-print绑定的按钮了！')
                },
            }
        }
    },

    methods: {
        savaOrder() {
            const _params = [];
            this.rowData.lists.forEach(item => {
                _params.push({
                    id: item.id,
                    sendOrderId: this.rowData.sendOrderId,
                    actSendCount: item.actSendCount,
                    createTime: this.rowData.createdTime
                })
            })

            this.btnLoading = true;

            printNewSendOrderApi(_params).then(result => {
                if (result.code == 200) {
                    this.$message.success(result.msg);
                    this.openShow = false;
                    this.$emit("update");
                } else {
                    this.$message.error(result.msg)
                }
            }).finally(() => {
                this.btnLoading = false;
            })
        },

        openPrint(data) {
            this.btnLoading = false;
            this.rowData = {}
            this.$nextTick(() => {
                this.rowData = data;
                this.isPrintShow = false;
                this.openShow = true;
            })
        },

        printOrder(data) {
            // this.isPrintShow = true;
            // this.openShow = true;
            this.btnLoading = false;
            this.rowData = {}
            this.$nextTick(() => {
                this.rowData = data;
                this.isPrintShow = true;
                this.openShow = true;
            })
        }
    },

    directives: {
        print
    },

    components: { orderItemComponent },

    created() {
        console.log('设备像素比率（近似DPI相关值）:', window.devicePixelRatio);
    }
}
</script>

<style scoped lang="scss">
.el-dialog__wrapper {
    padding-bottom: 10px;
}

#printTarget {
    // zoom: 0.8;
    /* 设置宽度和高度，这里大致模拟A4的尺寸比例，单位为像素 */
    width: 210mm;
    height: 297mm;
    /* 将宽度和高度转换为像素，不同设备的转换比例可能略有不同 */
    // width: 794px;
    // height: 1123px;
    overflow: hidden;
}

.line-box {
    width: 100%;
    height: 1mm;
    // margin: 15px 0;
    background-color: #DCDFE6;
}
</style>

<style media="print" lang="scss">
@media print {
    @page {
        size: auto;
        // margin: 1cm;
    }

    #printTarget {
        // width: 1100px;
    }

    .line-box {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

}
</style>